<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts体验</title>

    <script src="./echarts.min.js"></script>
    <style>
        .box {
            width: 300px;
            height: 300px;
            /* background-color: pink */
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script>
        const myChart = echarts.init(document.querySelector('.box'))

        option = {
            title: {
                text: 'Proportion of Browsers',
                subtext: 'Fake Data',
                top: 10,
                left: 10
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                type: 'scroll',
                bottom: 10,
                data: (function () {
                    var list = [];
                    for (var i = 1; i <= 28; i++) {
                        list.push(i + 2000 + '');
                    }
                    return list;
                })()
            },
            visualMap: {
                top: 'middle',
                right: 10,
                color: ['red', 'yellow'],
                calculable: true
            },
            radar: {
                indicator: [
                    { text: 'IE8-', max: 400 },
                    { text: 'IE9+', max: 400 },
                    { text: 'Safari', max: 400 },
                    { text: 'Firefox', max: 400 },
                    { text: 'Chrome', max: 400 }
                ]
            },
            series: (function () {
                var series = [];
                for (var i = 1; i <= 28; i++) {
                    series.push({
                        type: 'radar',
                        symbol: 'none',
                        lineStyle: {
                            width: 1
                        },
                        emphasis: {
                            areaStyle: {
                                color: 'rgba(0,250,0,0.3)'
                            }
                        },
                        data: [
                            {
                                value: [
                                    (40 - i) * 10,
                                    (38 - i) * 4 + 60,
                                    i * 5 + 10,
                                    i * 9,
                                    (i * i) / 2
                                ],
                                name: i + 2000 + ''
                            }
                        ]
                    });
                }
                return series;
            })()
        };
        myChart.setOption(option)
    </script>
    <!--
    步骤 
    1. 下载引入EChart.js 文件
    2. 准备一个盒子用来装生成的图表 注意： 这个盒子必须具备大小 
    3. 初始化echarts 实例对象  
    4. 指定配置项和数据